<template>
    <div class="tab-menu">
        <van-nav-bar
                title="财务中心"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="tab-box">
            <div v-for="(item, index) in routerArr"
                 :class="routerIndex == index ? 'avtice-tab' : ''"
                 :key="index"
            >
                <div @click="goUrl(index)" v-if="item.show">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <router-view></router-view>
        <div style="height: 10vh;"></div>
<!--        <footer-item></footer-item>-->
    </div>
</template>

<script>
    import footerItem from '@/components/footer.vue'
    import headerItem from '@/components/header.vue'

    export default {
        name: "tabMenu",
        data() {
            return {
                routerArr: [
                    {
                        name: '保险',
                        routerUrl: '/financial/jrInsurance?index=0',
                        show: false
                    },
                    {
                        name: '教育',
                        routerUrl: '/financial/jrEducation?index=1',
                        show: false
                    },
                    {
                        name: '财税',
                        routerUrl: '/financial/jrFinancial?index=2',
                        show: false
                    },
                    {
                        name: '人力资源',
                        routerUrl: '/financial/jrHuman?index=3',
                        show: false
                    },
                    {
                        name: '咨询类',
                        routerUrl: '/financial/jrAdvisory?index=4',
                        show: false
                    },
                    {
                        name: '企业服务',
                        routerUrl: '/financial/jrEnterpriseService?index=5',
                        show: false
                    },
                ],
                routerIndex: 0,
                menuList: [
                    "Finance/insurance", // 财务 -> 保险
                    'Finance/edu',      // 财务 -> 教育
                    "Finance/finance", // 财务 -> 财税
                    "Finance/hr",     // 财务 ->人力
                    "Finance/advisory", // 财务 -> 咨询类
                    "Finance/service" // 财务 -> 企业服务
                ]
            }
        },
        components: {
            footerItem, headerItem
        },
        methods: {
            goUrl(index) {
                if (index == 1 || index == 2 || index == 4 || index == 5) {
                    this.$dialog.alert({
                        title: '提示',
                        message: '此功能正在开发中敬请期待~'
                    }).then(() => {
                        // on close
                    });
                    return
                }
                if (this.routerIndex == index) {
                    return;
                }
                this.routerIndex = index
                this.$router.replace(this.routerArr[index].routerUrl)
            }
        },
        created() {
            console.log(this.$route.query.index);
            if (this.$route.query.index) {
                this.routerIndex = this.$route.query.index
            } else {
                this.routerIndex = 0
            }
            this.routerArr.map((item, index) => {
                let menu = this.menuList[index];
                item.show = this.$queryMenu(menu);
            });
        },
    }
</script>

<style scoped lang="less">
    .tab-wrap {
        /*width: 100vw;*/
        /*overflow: hidden;*/
    }

    .tab-box {
        background: #fff;
        border-bottom: 0.53rem solid #f5f5f5;
        box-sizing: border-box;
        font-size: 11px;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        padding: 0rem 5px;

        > div {
            display: inline-block;

            > div {
                padding: 9px 16px;
                font-size: 12px;
                margin: 8px 1px;
                white-space: nowrap;
                border-radius: 5px;
                border: solid 1px #c8c8c8;
                box-sizing: border-box;
                color: #666;
                display: inline-block;
            }
        }

        .avtice-tab {
            div {
                color: #fff;
                background: #366cb3;
                border: none;
            }
        }
    }
</style>
